<!-- pages/party/[type]/[id].vue -->
<template>
    <MainLayout v-if="scienceType.code === 'kpzykj'" :breadcrumbItems="breadcrumbItems" :neighbors="neighbors"
        :article="articleData">

    </MainLayout>

    <MainOtherLayout v-else :breadcrumbItems="breadcrumbItems" :neighbors="neighbors" :article="articleData">
        <template #content>
            <div class="article-detail">
                <section class="article-content">
                    <template v-if="scienceType.code === 'kpzysp'">
                        <div class="video-player">
                            <div class="video-wrapper">
                                <video ref="videoPlayer" class="video-element" controls>
                                    <source :src="articleData.video" type="video/mp4">
                                </video>
                            </div>
                        </div>
                    </template>
                    <template v-else>
                        <div v-html="articleData.text"></div>
                    </template>
                </section>
            </div>
            <div v-if="articleData.fileList.length>0" class="attachments">
                <h3 style="font-size: 1rem;">相关附件</h3>
                <ul>
                    <li v-for="file in articleData.fileList" :key="file.name">
                        <a :href="file.url" download target="_blank">{{ file.name }}</a>
                    </li>
                </ul>
            </div>
        </template>
    </MainOtherLayout>
</template>

<script setup>
import MainLayout from '@/components/videoDetail.vue'
import MainOtherLayout from '@/components/detailPage.vue'
const route = useRoute()
const router = useRouter()
const { $fetchGov, $fetchAuth } = useNuxtApp()
const userStore = useUserStore()
const articleData = ref(null)

// 获取文章浏览次数
await $fetchGov(`/app/api/article/view/${route.params.id}`, { method: 'GET' })
// 获取文章数据
const { data: article, refresh: refreshArticle } = await useAsyncData(
    `science-article-${route.params.id}`,
    async () => {
        const fetchMethod = userStore.user ? $fetchAuth : $fetchGov
        return await fetchMethod(`/app/api/article/${route.params.id}`, {
            method: 'GET'
        })
    },
    { watch: [() => route.params.id] }
)

// 添加路由变化监听
watch(() => route.params.id, async (newId) => {
    if (newId) {
        await refreshArticle()
    }
})

articleData.value = article.value.data || {}

const scienceType = computed(() => {
    return article.value.data.channel.articleModel
})

const { data: prev } = await useAsyncData(
    `party-prev`,
    async () => {
        return await $fetchGov(`/app/api/article/prev`, {
            method: 'GET',
            params: { id: route.params.id, channelId: articleData.value.channel.id, order: articleData.value?.order },
        })
    }
)

const { data: next } = await useAsyncData(
    `party-next`,
    async () => {
        return await $fetchGov(`/app/api/article/next`, {
            method: 'GET',
            params: { id: route.params.id, channelId: articleData.value.channel.id, order: articleData.value?.order },
        })
    }
)

const neighbors = computed(() => {
    return {
        prev: prev.value.data && prev.value.data.id ? {
            id: prev.value.data.id,
            title: prev.value.data.title,
            nav: 'science',
            category: route.params.type
        } : null,
        next: next.value.data && next.value.data.id ? {
            id: next.value.data.id,
            title: next.value.data.title,
            nav: 'science',
            category: route.params.type
        } : null
    }
})

// 面包屑导航
const breadcrumbItems = computed(() => [
    { title: '首页', path: '/' },
    { title: '科普资源', path: '/science' },
    {
        title: route.params.type === 'all-resource' ? '全部资源' : route.params.type === 'tandard-courseware' ? '课件' : route.params.type === 'technical-guidelines' ? '图文' : route.params.type === 'video' ? '视频' : route.params.type === 'poster'?'海报':'科普材料',
        path: `/science/${route.params.type}`
    },
    { title: article.value.data.title }
])

// SEO优化
useHead({
    // title: `${article.value.title} - 云南省健康与发展研究会`,
    meta: [
        {
            name: 'description',
            // content: article.value.summary || article.value.title
        },
        {
            property: 'og:image',
            // content: article.value.cover || '/images/og-default.png'
        }
    ]
})
</script>

<style lang="scss" scoped>
@use '@/assets/scss/main' as *;

.article-detail {
    .article-header {
        border-bottom: 1px solid #eee;
        padding-bottom: 1rem;
        margin-bottom: 1rem;

        h1 {
            color: $mytext-color;
            font-size: 1.3rem;
            margin-bottom: 1rem;
            text-align: center;
            font-weight: normal;
        }

        .meta-info {
            color: #666;
            font-size: 0.9rem;
            display: flex;
            gap: 1.5rem;
            justify-content: center;
            /* 水平居中 */
            align-items: center;
            /* 垂直居中 */
            gap: 1.5rem;
            /* 元素间距 */

            /* 兼容方案 */
            text-align: center;
            /* 备用文本居中 */
        }
    }

    .article-content {
        line-height: 1.8;
        font-size: 1.1rem;

        ::v-deep(img) {
            max-width: 100%;
            height: auto;
            margin: 1rem 0;
            border-radius: 4px;
        }

        ::v-deep(table) {
            width: 100%;
            margin: 1rem 0;
            border-collapse: collapse;

            td,
            th {
                padding: 0.8rem;
                border: 1px solid #ddd;
            }
        }
    }

    .video-player {
        .video-wrapper {
            position: relative;
            padding-bottom: 56.25%; // 16:9
            background: #000;
            border-radius: 8px;
            overflow: hidden;

            .video-element {
                position: absolute;
                width: 100%;
                height: 100%;
            }
        }

        .video-title {
            font-size: 20px;
            color: #333;
            margin: 16px 0 8px;
        }

        .video-subtitle {
            color: #666;
            font-size: 14px;
        }
    }

    .attachments {
        margin-top: 3rem;
        padding-top: 1rem;
        // border-top: 1px solid #eee;

        h3 {
            color: #333;
            margin-bottom: 1rem;
        }

        li {
            padding: 0.5rem 0;
            list-style-type: none;

            a {
                color: #1867CA;
                text-decoration: none;
                display: flex;
                align-items: center;
                gap: 0.5rem;

                &:hover {
                    text-decoration: underline;
                }
            }
        }
    }

    .article-actions {
        margin-top: 3rem;
        padding-top: 2rem;
        border-top: 1px solid #eee;
        text-align: center;
    }
}

.gov-button {
    display: inline-flex;
    align-items: center;
    padding: 0.8rem 1.5rem;
    background: #1867CA;
    color: white;
    border-radius: 4px;
    text-decoration: none;
    transition: opacity 0.2s;

    &:hover {
        opacity: 0.9;
    }
}

@media (max-width: 768px) {
    .article-detail {
        padding: 0;
    }
}
</style>